<template>
  <div class="book-wrapper">
    <MNav :navs="content.navs" />
    <el-container class="main-content">
      <el-main class="mt20">
        <ul class="blogs pl20 pr20">
          <blog-card-small
            v-for="item in blogs"
            v-bind:key="item.id"
            v-bind:blog="item"
          ></blog-card-small>
        </ul>
      </el-main>
      <el-aside class="main-slide">
        <Intro name="生活琐碎" :text="text" />
      </el-aside>
    </el-container>
  </div>
</template>
<script>
import MNav from "./components/nav";
import BlogCardSmall from "views/components/blog-card-small";
import Intro from "./components/intro";
import request from "@/request/index";
import { ref, reactive, toRef } from "vue";
import texts from "@/common/wonder-texts.js";
const ctext = texts[Math.floor(Math.random() * 13)];
export default {
  name: "lives",
  setup() {
    const text = ref(texts[3]);
    const blogs = ref([]);
    text.value = ctext;

    const content = reactive({
      navs: [],
    });

    request
      .get("/blog/list", { type: "lives", state: "1", pageSize: 15 })
      .then((response) => {
        blogs.value = response.data;
      });
    return {
      text,
      content,
      blogs,
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      var navs = [
        {
          name: "home",
          title: "博客首页",
          path: "/home",
        },
        { name: to.name, title: to.meta ? to.meta.title : "", path: to.path },
      ];
      vm.content.navs = navs;
    });
  },

  components: {
    MNav,
    Intro,
    BlogCardSmall,
  },
};
</script>
<style lang="scss" scoped>
.main-content > .el-main {
  padding: 0;
}
.blogs {
  padding: 0;
}
.main-slide {
  width: 260px;
}
</style>
